<template>
  <div class="mine">
    <div class="mine-bg" :style="{backgroundImage: `url(${userData.userBg})`}">
      <van-uploader :after-read="uploadBg" />
    </div>

    <div class="mine-box">
      <div class="mine-info">
        <div class="mine-img">
          <img class="img-auto" :src="userData.userImg" alt />

          <div class="up-img">
            <van-uploader :max-size="500 * 1024" :after-read="uploadAvatar" />
          </div>
        </div>
        <div class="mine-text">
          <div class="mine-name one-text">{{userData.nickName}}</div>
          <div class="mine-desc one-text">{{userData.desc ? userData.desc : '这家伙很懒，什么都没留下。'}}</div>
        </div>
      </div>

      <div class="mine-list">
        <van-cell
          @click="goPage(item.name)"
          :title="item.title"
          is-link
          title-style="color: #666;"
          v-for="(item, i) in selectList"
          :key="i"
        />
      </div>
    </div>
  </div>
</template>

<script>
import "../assets/less/mine.less";
export default {
  name: "Mine",
  data() {
    return {
      selectList: [
        { title: "个人资料", name: "Personal" },
        { title: "我的订单", name: "Order" },
        { title: "我的收藏", name: "Like" },
        { title: "地址管理", name: "AddressList" },
        { title: "安全中心", name: "Safe" },
      ],
      userData: {},
    };
  },

  created() {
    this.getUserInfo();
  },

  methods: {
    goPage(name) {
      this.$router.push({ name });
    },

    //获取用户信息
    getUserInfo() {
      let tokenString = this.$cookies.get("tokenString");

      if (!tokenString) {
        console.log("浏览器token不存在");
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        method: "GET",
        url: this.baseURL + "/findMy",
        params: {
          appkey: this.appkey,
          tokenString,
        },
      })
        .then((response) => {
          // console.log(response);
          this.$toast.clear();

          if (response.data.code == 700) {
            this.$toast({
              message: response.data.msg,
              forbidClick: true,
              duration: 1000,
            });
            return this.$router.push({ name: "Login" });
          }

          if (response.data.code === "A001") {
            this.userData = response.data.result[0];
          } else {
            this.$toast({
              message: response.data.msg,
              forbidClick: true,
              duration: 1000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log(err);
        });
    },

    //上传头像
    uploadAvatar(file) {
      //限制上传文件类型
      let types = ["png", "gif", "jpg", "jpeg"];

      //截取上传图片的类型
      let type = file.file.type.split("/")[1];
      console.log("type ==> ", type);

      if (types.indexOf(type) === -1) {
        return this.$toast({
          message: `文件类型只支持${types.join(",")}`,
          forbidClick: true,
          duration: 3000,
        });
      }

      //处理base64
      let base64 = file.content.replace(/data:image\/[A-Za-z]+;base64,/, "");

      //发起上传图片请求
      let tokenString = this.$cookies.get("tokenString");

      if (!tokenString) {
        console.log("浏览器token不存在");
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        method: "POST",
        url: this.baseURL + "/updateAvatar",
        data: {
          appkey: this.appkey,
          tokenString,
          imgType: type,
          serverBase64Img: base64,
        },
      })
        .then((response) => {
          // console.log(response);
          this.$toast.clear();

          if (response.data.code == 700) {
            this.$toast({
              message: response.data.msg,
              forbidClick: true,
              duration: 3000,
            });
            return this.$router.push({ name: "Login" });
          }

          if (response.data.code === "H001") {
            if (response.data.result[0] === 1) {
              this.userData.userImg = response.data.userImg;
            }
          }
          this.$toast({
            message: response.data.msg,
            forbidClick: true,
            duration: 3000,
          });
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },

    // 上传背景
    uploadBg(file) {
      //限制上传文件类型
      let types = ["png", "gif", "jpg", "jpeg"];

      //截取上传图片的类型
      let type = file.file.type.split("/")[1];
      console.log("type ==> ", type);

      if (types.indexOf(type) === -1) {
        return this.$toast({
          message: `文件类型只支持${types.join(",")}`,
          forbidClick: true,
          duration: 3000,
        });
      }

      //处理base64
      let base64 = file.content.replace(/data:image\/[A-Za-z]+;base64,/, "");

      //发起上传图片请求
      let tokenString = this.$cookies.get("tokenString");

      if (!tokenString) {
        console.log("浏览器token不存在");
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        method: "POST",
        url: this.baseURL + "/updateUserBg",
        data: {
          appkey: this.appkey,
          tokenString,
          imgType: type,
          serverBase64Img: base64,
        },
      })
        .then((response) => {
          // console.log(response);
          this.$toast.clear();

          if (response.data.code == 700) {
            this.$toast({
              message: response.data.msg,
              forbidClick: true,
              duration: 3000,
            });
            return this.$router.push({ name: "Login" });
          }

          if (response.data.code === "H001") {
            if (response.data.result[0] === 1) {
              this.userData.userImg = response.data.userImg;
            }
          }
          this.$toast({
            message: response.data.msg,
            forbidClick: true,
            duration: 3000,
          });
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    }
  },
};
</script>